<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
<button>按钮</button>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, porro quod error ratione ullam tempore mollitia quos blanditiis quis obcaecati, maxime suscipit at corporis tenetur modi facilis repellendus facere maiores!</p>
<div style="width: 100px;height: 100px;background: #000;"></div>		
<span>文本</span>		
<br>
<input type="button" value="按钮2" />
<input type="text" />
		<script>	
		/*javaScript:基础语法+DOM(页面)+BOM（浏览器）
		  JQuery操作DOM方式(7种方式  36个函数)---改变页面效果
		  1.元素内容操作：操作元素和元素内容的方式【3个函数】
		  .html()
		  .val()
		  .text()
		  2.元素属性操作：操作元素的属性 【固定属性、附加属性】【4个函数】
		  .attr()
		  .removeAttr()
		  .prop() 
		  .removeProp()
		  
		  3.元素类名操作:操作css类样式【4个函数】
		  addClass()
		  removeClass()
		  toggleClass()
		  hasClass()
		  
		  4.元素样式【尺寸】操作：【5个函数】
		  css()
		  width()和height()
		  outerWidth()和outerHeight()
		  
		  5.元素删除和插入操作：【7个函数】
		  append()和prepend()          		        		  
		  after()和 before()          		      		  
		  remove()和 empty()           	        		  
		  replaceWith()
		  
		  
		  6.元素遍历操作：【6个函数】
		  children()和parent()
		  siblings()
		  next()和 prev()      
		  each()     
		  
		  7.动画操作：【7个函数】
		  show()和 hide()         
		  slideDown()和slideUp()      	  
	      fadeIn()和fadeOut()      
		  hover()   
		  
		  
		  
		  大作业：tab选项卡
		  DOM 浏览器对象模型：学习7个对象的方法使用
		  吸顶灯效果
		  
		*/
		
		
		
		
		$("input[type='button']").click(function(){
			$("input[type='text']").val("文本框输出效果");
			});
        $('div').html(function(){
			$('span').html("<a href='#'>超文本</a>");
		});

		</script>
		<button>按钮</button>
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus quidem distinctio tenetur earum delectus quo praesentium neque quam, blanditiis hic nam quisquam rem sint temporibus iste, cupiditate quis, modi sed!</p>
		<script>
			/*JQuery操作DOM：通过点击一个元素绑定一个事件给另外一个元素改变效果
			.html()函数 ：增加一个元素，覆盖原来的html
			.val()函数：input元素使用，改变修改效果表单元素中文本
			
			*/
	 	$('button').click(function(){
			//DOM操作---改变页面其他元素
			//DOM操作---改变p元素改成marquee元素
			$('p').html("<marquee>🐏🐎跑马灯......🐎🐏</marquee>");
			
		});	 
		
		
	/* 100*100的框，div,  鼠标移动上去，改变下面的文本为超文本
	   按钮和输入框，点击按钮，输入框输出文字效果
	*/		

		
	
		
		
		
		</script>
	</body>
</html>